<template>
    <div> 
        <div class="aui-content " v-for="(item, index) in addressArrList" :key="index">
			<ul class="aui-list aui-media-list address_list" @click.stop="goConfirmOrder(item)">
				<li class="aui-list-item address-root" >
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-label-icon">
							<i class="icon njfont nj-dizhi"></i>
						</div>
						<div class="aui-list-item-inner clear_b">
							<div class="aui-list-item-text">													<!--?item.receivername:userInfomation.mobile-->
								<div class="aui-list-item-title" style="width: 64.5%;text-align: left;overflow-x: hidden;white-space: nowrap" :class="{changeColor:item.storeCode != storeCode}"><strong id="#uvipname" class="uvipname">收货人:{{item.receivername?item.receivername:userInfomation.mobile}}</strong><span class="aui-font-size-14 text_c_gray"></span></div>
								<div class="aui-list-item-right aui-font-size-14" style="width: 35.5%;text-align: right;overflow-x: hidden;white-space: nowrap" id="phone">{{item.phone}}</div>
							</div>
							<p class="address_float" :class="{changeColor:item.storeCode != storeCode}"><span class="aui-label aui-label-info">{{item.label}}</span>&nbsp;<span class="show-address">{{item.address}}</span><span class="show-address">{{item.houseNumber?" "+item.houseNumber:""}}</span></p>
						</div>
					</div>
					<div class="edit_address" :class="{changeColor:item.storeCode != storeCode}">
						 <!--  @click="setDefaultP(index)"-->
						<!--<set-default    :item = "item" :userInfomation = "userInfomation" ref = 'defaultBtn'></set-default>-->
						<div class="aui-btn aui-btn-outlined aui-btn-edit " @click.stop="goEditAddress(item)"><i class="aui-iconfont aui-icon-edit"></i>编辑</div>
						<!--<del-address   :item = "item" :userInfomation = "userInfomation" ref = 'defaultBtn'></del-address>-->
						<!--<div class="aui-pull-left">
							<label><input class="aui-radio" type="radio" name="demo1">&nbsp;默认地址</label>
						</div>-->
						<div class="aui-btn aui-btn-outlined m-delete" @click.stop = "doDelete(item)"><i class="aui-iconfont aui-icon-trash"></i>删除</div>
					</div>
				</li>
				<div class="addressListM" @click.stop="showMessage(item)" v-if="item.storeCode != storeCode">
				
				</div>
			</ul>
			
		</div>
		 <div id="contorlShow" v-if="!addressArr || !addressArr.length">
			<div id="disShow">
				<img src="static/image/no_news.png" alt="" />
				<p>暂无收货地址信息</p>
			</div>
		</div>
    </div> 
</template>
<script>

	import {mapGetters,mapActions,mapMutations} from "vuex";
	import {reFreshUserInfo} from '../../../utils/WXH/login.js';
	import {MessageBox} from '../../../ui-components';
//	import SetDefault from './AddressSetDefault'; 
//	import DelAddress from './AddressDelete';
	import {Toast} from '../../../utils/toast.js';
	
//	reFreshUserInfo(this);
    export default {
        props: {
            userInfomation: {
            	type: Object,
            	default: function () {
                	return {}
                }
            }
        },
        data () {
            return {
               storeCode:null,
               addressArr:null
            }
        },
        components:{
//      	'set-default':SetDefault,
//      	'del-address':DelAddress
        },
        computed: {
			...mapGetters([
				"getDomTree"
			]),
			...mapGetters('zx',[
				'getAddressList','getUserInfo'
			]),
			...mapGetters('wxh',[
				'sessionId',
				'userInfo',
			]),
			...mapGetters('qxz',[
				"getLocation"
			]),
			addressArrList(newVal,oldVal){
				return this.addressArr;
			}
		},
		watch:{
			userInfo(newVal,oldVal){
				this.addressArr = newVal.addressLists;
				this.initData();
			}
		},
        methods: {
        	...mapActions('zx',[
        		"setAddressInfo"
        	]),
        	...mapMutations('zx',[
	    		'setaddFlagMutation','setNowAddressMutation'
	    	]),
	    	...mapMutations('wxh', [
			  'USER_INFO',
			  'LOGO_OUT',
			  'LOGO_IN',
			  'CLEAR_INFO'
			]),
	    	showMessage(){
	    		Toast({
					message: '当前地址不在配送范围内',
					duration: 2000,
					type: 'fail'
				});
	    	},
			goEditAddress(item){
				if(!item.result){
					item.result = '';
				}
				this.setNowAddressMutation(item);
				this.setaddFlagMutation(false);
				
				//存local 防止vuex失效  当失效时取用
				localStorage.setItem('userAddressNow',JSON.stringify(item));
				
				let id = this.$route.query.id;
				let pagepath = this.$route.query.pagepath
				if(id){
					this.$router.push({path:'addAddress',query:{id:2}});
				}else if(pagepath){
					this.$router.push({path:'addAddress',query:{id:2.2}});
				}else{
					this.$router.push('addAddress');
				}
			},
			doDelete(item) {
				if(item && this.getLocation){
					if(item.addressid == this.getLocation.addressid){
						console.log('设置首页dizhi')
						this.$store.dispatch('qxz/updateLocation', null);  // 用户将首页选择的地址删了，做同步操作
						localStorage.setItem('locateIn',null);
						localStorage.setItem('chooseAddressActiveIndex',null);
					}
				}
				
	            let params = {
					type : "DEL",
					addressid:item.addressid,
					component:this
				}
	            MessageBox.confirm('是否删除地址？').then((action)=>{
	            	params.addressid = item.addressid;
	          	    this.setAddressInfo(params);
	            })

	        },
			goConfirmOrder(item){
				console.log(9988)
				item.flag = true;
				let id = this.$route.query.id;
				let pagepath = this.$route.query.pagepath 
				if(id){
					this.$router.push({path:'confirmOrder',query:{name:JSON.stringify(item)}});
				}else if(pagepath){
					this.$router.push({path:"ConfirmOrderIntegral",query:{name:JSON.stringify(item)}});
				}
			},
	    	initData(){
	    		let defaultAdd = this.addressArr[0];
	    		for(let i = 0 ; i < this.addressArr.length; i++){
					if(this.addressArr[i].label == '0'){
						this.addressArr[i].label = '家庭';
					}else if(this.addressArr[i].label == '1'){
						this.addressArr[i].label = '公司';
					}else if(this.addressArr[i].label == '2'){
						this.addressArr[i].label = '其他';
					}
	
					if(this.addressArr[i].defaultaddress == '1'){
						this.addressArr[i].defaultaddress = '默认';
					}else if(this.addressArr[i].defaultaddress == '0'){
						this.addressArr[i].defaultaddress = '非默认';
					}
				}

	    	}
        },
        created () {
 			console.log(this.userInfo.addressLists,'渲染页面制空数据');
 			this.storeCode = localStorage.getItem('storeCode');
 			
        },
        async mounted () {
			this.reFreshUserInfo(this);
			this.addressArr = this.userInfo.addressLists;
			this.initData();
        }
    }
</script>
<style scoped>
 .address_float{
 	float: left;
 	text-align: left;
 }
 .clear_b::after{
 	content: "";
    clear: both;
    display: block;
    overflow: hidden;
    font-size: 0;
    height: 0;
 }
 .addressListM{
 	width: 100%;
 	height: 100%;
 	background: #B4B4B4;
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
 	opacity: 0;
 }
 .changeColor{
 	color: #B4B4B4;
 }
 #disShow{
		position: absolute;
   		padding: 3rem;
   		top: 3rem;
   		text-align: center;
	}
</style>